<script setup>
import {ref, computed, onMounted} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {useUserInfoStore} from "@/stores/userInfo";
import {useStoreInfoStore} from '@/stores/storeInfo'
import {
  getStoreById,
  getFavoriteCountById,
  getReviewCountById,
  getAvgScoreById
} from '@/api/store';
import {
  getReviewByStoreId,
  getChildReviewByParentId,
  insertChildReview,
  insertParentReview
} from '@/api/review'
import {
  addFavoriteStore,
  removeFavoriteStore,
  getFavoriteByUserStore
} from "@/api/favorite";
import {ElMessage, ElMessageBox} from "element-plus";
import {getCurStore} from "@/api/store";
import {getCurrentUserInfo} from "@/api/user";
import heart from "@/assets/love.png"

const route = useRoute()
const router = useRouter()
const storeId = ref(route.params.id)
const curUserId = ref()
const store = ref({})

const comments      = ref([])   // 顶层评论 DTO 列表
const defaultAvatar = 'https://via.placeholder.com/80?text=Avatar'

const isFavorited = ref(false)
const tagDialogVisible = ref(false)
const favoriteTags      = ref([])  // 用户输入的标签
const showReplyDialog = ref(false)
const replyToId       = ref(null)     // 要回复的 parentId
const replyToName     = ref('')       // 在弹窗标题显示“回复 XXX”
const replyContent    = ref('')
const replyMedia      = ref([])       // 上传组件的 fileList
const replyReview = ref({})
const addDialogVisible = ref(false)
const newComment = ref({
  envScore:     0,      // 环境评分
  serviceScore: 0,      // 服务评分
  tasteScore:   0,      // 口味评分
  totalScore:   0,      // 综合评分
  text:         '',     // 评论文字
  media:        []      // el-upload 的 fileList
})

const getCurUserId = () => {
  getCurrentUserInfo().then(res => {
    curUserId.value = res.data.id
    console.info("当前用户ID:", curUserId.value)
    loadFavoriteStatus()
  })
}

onMounted(() => {
  getCurUserId()
  fetchStoreDetails()
  fetchComments()
})

async function fetchStoreDetails() {
  const res = await getStoreById(storeId.value)
  store.value = res.data

  const [favRes, revRes, avgRes] = await Promise.all([
    getFavoriteCountById(storeId.value),
    getReviewCountById(storeId.value),
    getAvgScoreById(storeId.value)
  ])

  store.value.favoriteCount = favRes.data || 0
  store.value.reviewCount   = revRes.data || 0
  store.value.avgScore      = avgRes.data   || 0.0
  console.info(store.value)
}

function fetchComments() {
  getReviewByStoreId(storeId.value).then(res => {
    // 假设后端 JsonResponse.data 就是 List<ReviewDTO>
    comments.value = res.data.map(c => ({
      ...c,
      replies: []          // 先给个空数组占位
    }))

    // 为每条顶层评论再并发拿它的 children
    comments.value.forEach(c => {
      getChildReviewByParentId(c.id).then(r2 => {
        // 后端返回的 List<ReviewDTO>，直接赋给 replies
        c.replies = r2.data
      })
    })
  })
}

async function loadFavoriteStatus() {
  const res = await getFavoriteByUserStore(
      {
        userId: curUserId.value,
        storeId: storeId.value
      })
  if (res.data) {
    isFavorited.value = true
    // 如果后端也一并返回已有标签列表，可在这里赋值：
    favoriteTags.value = res.data.tags || []
  }
}

async function toggleFavorite() {
  if (!curUserId.value) {
    return ElMessage.warning('请先登录')
  }
  if (isFavorited.value) {
    ElMessageBox.confirm(
        '确定要取消对该店铺的收藏吗？',
        '取消收藏',
        {
          confirmButtonText: '确认',
          cancelButtonText: '再想想',
          type: 'warning'
        }
    ).then(async () => {
      const res = await removeFavoriteStore({
        userId: curUserId.value,
        storeId: storeId.value
      })
      if (res.data != null) {
        isFavorited.value = false
        ElMessage.success('已取消收藏')
      } else {
        ElMessage.error('取消失败，请重试')
      }
    }).catch(() => {
    })
  } else {
    // 弹出标签对话框来编辑多个标签
    favoriteTags.value = []  // 清空或赋初始值
    tagDialogVisible.value = true
  }
}

async function confirmFavorite() {
  if (favoriteTags.value.length === 0) {
    return ElMessage.warning('请至少添加一个标签')
  }
  const res = await addFavoriteStore({
    userId:   curUserId.value,
    storeId:  storeId.value,
    tags:     favoriteTags.value    // 传数组到后端
  })
  if (res.data) {
    isFavorited.value = true
    ElMessage.success('收藏成功')
    tagDialogVisible.value = false
  } else {
    ElMessage.error('收藏失败')
  }
}

// 打开弹窗前重置数据
function openAddDialog() {
  newComment.value = {
    envScore:     0,
    serviceScore: 0,
    tasteScore:   0,
    totalScore: 0,
    text:         '',
    media:        []
  }
  addDialogVisible.value = true
}

function handleAddUploadChange(file, fileList) {
  if (file.raw) {
    file.url = URL.createObjectURL(file.raw)
  }
  newComment.value.media = fileList
}

function handleAddUploadSuccess(res, file, fileList) {
  // console.info(res.data.url)
  // if (res.data && res.data.url) {
  file.url = res.data.url
  // }
  newComment.value.media = fileList
  console.info(newComment.value.media)
}

// 提交新父评论
async function submitNewComment() {
  // 校验文字必填
  if (!newComment.value.text.trim()) {
    return ElMessage.warning('评论内容不能为空')
  }

  // 构造 ReviewDTO 载荷
  const dto = {
    storeId: storeId.value,      // 页面上下文中已有 storeId
    userId: curUserId.value,    // 当前登录用户 ID
    contentText: newComment.value.text,
    contentMedia: newComment.value.media
        .map(f => f.response?.data?.url) // 处理上传后的 URL
        .filter(Boolean),
    status: 1,                  // 直接通过审核
    isDeleted: 0,                  // 未删除
    // 内嵌 rating 对象
    rating: {
      scoreEnv: newComment.value.envScore,
      scoreService: newComment.value.serviceScore,
      scoreTaste: newComment.value.tasteScore,
      scoreTotal: newComment.value.totalScore
    }
  }

  // 调用后端
  const res = await insertParentReview(dto)
  if (res.data) {
    ElMessage.success('评论发布成功')
    addDialogVisible.value = false
    fetchComments()  // 刷新评论列表
  } else {
    ElMessage.error('发布失败，请稍后重试')
  }
}

function openReplyDialog(parentId, toName) {
  replyToId.value    = parentId
  replyToName.value  = toName
  showReplyDialog.value = true
}

function resetReplyDialog() {
  showReplyDialog.value = false
  replyContent.value   = ''
  replyMedia.value     = []
  replyToId.value      = null
}

function handleUploadChange(uploadFile, fileList) {
  if (uploadFile.raw) {
    uploadFile.url = URL.createObjectURL(uploadFile.raw)
  }
  replyMedia.value = fileList
}

function handleUploadSuccess(res, uploadFile, fileList) {
  if (res.url && res.data.url) {
    uploadFile.url = res.data.url
  }
  replyMedia.value = fileList
}

async function submitReply() {
  console.info(curUserId.value)
  if (!replyContent.value.trim()) {
    return ElMessage.warning('回复内容不能为空')
  }
  // 构造 Review 对象
  replyReview.value = {
    parentId: replyToId.value,
    storeId: Number(storeId.value),
    userId: curUserId.value,
    contentText: replyContent.value,
    contentMedia: replyMedia.value.map(f => f.response.data.url).filter(Boolean),
    status: 1,
    hidden: 0,
    deleted: 0
  }
  console.info(replyReview.value)
  const res = await insertChildReview(replyReview.value)
  if (res.data) {
    ElMessage.success('回复发布成功')
    resetReplyDialog()
    fetchComments()
  } else {
    ElMessage.error('发布失败，请稍后重试')
  }
}

const toUserPage = (id) => {
  if (id === curUserId.value) {
    return router.push('/user/personalHomePage')
  }
  else
    router.push(`/user/othersHomePage/${id}`)
}

</script>

<template>
  <div class="store-detail-page">
    <!-- 顶部大横幅 -->
    <section class="store-hero">
      <div class="hero-content">
        <h1 class="hero-title">{{ store.name }}</h1>
        <div class="hero-stats">
          <div class="hero-stat">
            <i class="icon-star"></i>
            <span class="stat-value">{{ store.avgScore?.toFixed(1) || '-' }}</span>
          </div>
          <div class="hero-stat">
            <i class="icon-comment"></i>
            <span class="stat-value">{{ store.reviewCount || 0 }}</span>
          </div>
          <div class="hero-stat">
            <i class="icon-heart"></i>
            <span class="stat-value">{{ store.favoriteCount || 0 }}</span>
          </div>
          <div class="hero-stat hero-price">
            <i class="icon-price"></i>
            <span class="stat-value">￥{{ store.priceMin }}-{{ store.priceMax }}/人</span>
          </div>
        </div>
        <div class="hero-tags">
          <span v-for="tag in store.tags" :key="tag" class="tag">{{ tag }}</span>
        </div>

        <div class="hero-favorite">
          <button
              class="favorite-btn"
              :class="{ active: isFavorited }"
              @click="toggleFavorite"
          >
            <i v-if="isFavorited" class="icon-heart-fill"></i>
            <i v-else class="icon-heart-fill-1"></i>
            <span>{{ isFavorited ? '已收藏' : '收藏' }}</span>
          </button>
        </div>

        <el-dialog
            title="编辑收藏标签"
            :model-value="tagDialogVisible"
            width="30%"
        >
          <el-form label-width="15%">
            <el-form-item label="标签列表">
              <el-select
                  v-model="favoriteTags"
                  multiple
                  filterable
                  allow-create
                  default-first-option
                  placeholder="输入后回车添加标签"
              />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="tagDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmFavorite">确认</el-button>
          </span>
        </el-dialog>

      </div>
      <div class="hero-image">
        <img :src="store.coverImage" alt="店铺封面" />
      </div>
    </section>

    <!-- 基础信息 -->
    <section class="store-info">
      <div class="info-grid">
        <div class="info-item">
          <div class="info-label">分类</div>
          <div class="info-value">{{ store.category }} / {{ store.subCategory }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">营业时间</div>
          <div class="info-value">{{ store.openingHours }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">地址</div>
          <div class="info-value">{{ store.address }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">联系方式</div>
          <div class="info-value">{{ store.contactInfo }}</div>
        </div>
      </div>
      <div class="info-desc">
        <h2>店铺描述</h2>
        <p>{{ store.description }}</p>
      </div>
    </section>
    <h2 class="gallery-title">店铺相册</h2>
    <div class="gallery-scroll">
      <div
          v-for="(url, idx) in store.photos || []"
          :key="idx"
          class="gallery-item"
      >
        <img :src="url" alt="Photo" />
      </div>
    </div>

    <!-- 评论区 -->
    <section class="comments-section">
      <h2 class="comments-title">用户评论 ({{ store.reviewCount }})</h2>

      <div class="comment-actions top-actions">
        <button class="btn-add-comment" @click="openAddDialog">
          发布评论
        </button>
      </div>

      <ul class="comment-list">
        <li v-for="comment in comments" :key="comment.id" class="comment-item">
          <!-- 头像 + 用户名 + 时间 -->
          <div class="comment-avatar">
            <img :src="comment.user.avatarUrl || defaultAvatar" alt="用户头像" @click="toUserPage(comment.userId)" />
          </div>
          <div class="comment-body">
            <div class="comment-header">
              <span class="username">{{ comment.user.nickname }}</span>
              <span class="comment-time">{{ comment.createdAt }}</span>
            </div>

            <!-- 只有顶层评论显示评分 -->
            <div v-if="comment.score > 0" class="comment-rating">
              <i v-for="n in 5" :key="n"
                 class="star"
                 :class="{ active: n <= comment.score }"></i>
              <span class="rating-value">{{ comment.score }}.0</span>
            </div>

            <p class="comment-text">{{ comment.contentText }}</p>
            <!-- 媒体列表 -->
            <div v-if="comment.contentMedia?.length" class="comment-media">
              <img v-for="(url,i) in comment.contentMedia" :key="i" :src="url"  alt=""/>
            </div>

            <div class="comment-actions">
              <button class="btn-reply" @click="openReplyDialog(comment.id, comment.user.nickname)">
                回复
              </button>
            </div>

            <!-- 回复列表 -->
            <ul v-if="comment.replies?.length" class="reply-list">
              <li v-for="reply in comment.replies" :key="reply.id" class="reply-item">
                <div class="reply-avatar">
                  <img :src="reply.user.avatarUrl || defaultAvatar" alt="头像" @click="toUserPage(reply.userId)" />
                </div>
                <div class="reply-content">
                  <div class="reply-header">
                    <span class="username">{{ reply.user.nickname }}</span>
                    <span class="comment-time">{{ reply.createdAt }}</span>
                  </div>
                  <p class="reply-text">{{ reply.contentText }}</p>

                  <div
                      v-if="reply.contentMedia?.length"
                      class="reply-media"
                  >
                    <img
                        v-for="(url, i) in reply.contentMedia"
                        :key="i"
                        :src="url"
                        alt="回复图片"
                        class="reply-media__img"
                    />
                  </div>

                </div>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </section>

    <el-dialog
        title="发布评论"
        :model-value="addDialogVisible"
        width="40%"
    >
      <el-form label-width="15%">
        <!-- 环境评分 -->
        <el-form-item label="环境评分">
          <el-rate v-model="newComment.envScore" :max="5"/>
        </el-form-item>
        <!-- 服务评分 -->
        <el-form-item label="服务评分">
          <el-rate v-model="newComment.serviceScore" :max="5"/>
        </el-form-item>
        <!-- 口味评分 -->
        <el-form-item label="口味评分">
          <el-rate v-model="newComment.tasteScore" :max="5"/>
        </el-form-item>
        <!-- 综合评分 -->
        <el-form-item label="综合评分">
          <el-rate v-model="newComment.totalScore" :max="5"/>
        </el-form-item>
        <!-- 文字内容 -->
        <el-form-item label="评论内容">
          <el-input
              type="textarea"
              v-model="newComment.text"
              placeholder="说说你的感受…"
              rows="4"
          />
        </el-form-item>
        <!-- 上传图片 -->
        <el-form-item label="上传图片">
          <el-upload
              action="/api/file/upload"
              list-type="picture-card"
              :file-list="newComment.media"
              :on-change="handleAddUploadChange"
              :on-success="handleAddUploadSuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitNewComment">提交</el-button>
    </span>
    </el-dialog>
    <el-dialog
        :title="['回复']+ replyToName"
        :model-value="showReplyDialog"
        width="40%"
        @close="resetReplyDialog"
    >
      <el-form label-position="top">
        <el-form-item label="回复内容">
          <el-input
              type="textarea"
              v-model="replyContent"
              placeholder="请输入回复内容"
              rows="4"
          />
        </el-form-item>
        <el-form-item label="上传图片（可选）">
          <el-upload
              action="/api/file/upload"
              list-type="picture-card"
              :on-change="handleUploadChange"
              :on-success="handleUploadSuccess"
              :file-list="replyMedia"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="resetReplyDialog">取消</el-button>
        <el-button type="primary" @click="submitReply">发布</el-button>
      </template>
    </el-dialog>

  </div>
</template>


<style scoped lang="scss">
// 变量定义
$primary: #409EFF;
$primary-light: #e6f7ff;
$primary-dark: #3a8ee6;
$red-heart: #ff4d4f; // 红色爱心颜色
$shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
$shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.12);
$transition: all 0.3s ease;

/* Container */
.store-detail-page {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Segoe UI', sans-serif;
  color: #333;
  line-height: 1.6;
  padding-bottom: 60px;
}

/* ---- Hero Section ---- */
.store-hero {
  display: flex;
  flex-wrap: wrap;
  background: #fafafa;
  border-radius: 12px;
  overflow: hidden;
  margin: 2rem 0;
  box-shadow: $shadow;
  transition: $transition;

  &:hover {
    box-shadow: $shadow-hover;
  }
}
.hero-content {
  flex: 1 1 300px;
  padding: 30px;
}
.hero-title {
  font-size: 28px;
  margin: 0 0 1.5rem;
  color: #222;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: $primary;
    border-radius: 3px;
  }
}
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}
.hero-stat {
  display: flex;
  align-items: center;
  color: #555;
}
.hero-stat .icon-star,
.hero-stat .icon-comment,
.hero-stat .icon-heart,
.hero-stat .icon-price {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background-size: contain;
  background-repeat: no-repeat;
}
.icon-star {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23f5a623' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .587l3.668 7.568L24 9.423l-6 5.847L19.335 24 12 20.012 4.665 24 6 15.27 0 9.423l8.332-1.268z'/%3E%3C/svg%3E");
}
.icon-comment {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23788296' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
}
.icon-heart {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23ff4d4f' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}
.icon-price {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23788296' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm1 16h-2v-2h2v2zm1.07-7.75l-.9.92C12.45 11.9 12 12.5 12 15h-2v-.5c0-1 .45-1.5 1.17-2.22l1.24-1.26a2 2 0 1 0-2.82-2.82l-.1.1-1.42-1.42.1-.1a4 4 0 1 1 5.66 5.65z'/%3E%3C/svg%3E");
}
.hero-price .stat-value {
  font-weight: 600;
}
.hero-stat .stat-value {
  font-size: 16px;
}

/* Tags */
.hero-tags {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tag {
  display: inline-block;
  background: $primary-light;
  color: $primary-dark;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  transition: $transition;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(64, 158, 255, 0.2);
  }
}

.hero-favorite {
  margin-top: 20px;
}
.favorite-btn {
  display: inline-flex;
  align-items: center;
  border: 1px solid $red-heart;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: $red-heart;
  padding: 8px 20px;
  border-radius: 6px;
  transition: $transition;

  &:hover {
    background-color: $red-heart;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
  }

  &.active {
    background-color: $red-heart;
    color: white;
    border-color: $red-heart;

    &:hover {
      background-color: #e33e3e;
    }
  }

  .icon-heart-fill {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("@/assets/love.png");
        //url("data:image/svg+xml,%3Csvg fill='currentColor' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  }

  .icon-heart-fill-1 {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("@/assets/love_plain.png");
    //url("data:image/svg+xml,%3Csvg fill='currentColor' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  }
}
.dialog-footer {
  text-align: right;
}

/* 其他样式保持不变 */
.hero-image {
  flex: 0 0 40%;
  min-width: 300px;
  position: relative;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: $transition;

    &:hover {
      transform: scale(1.05);
    }
  }
}

.store-info {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: $shadow;
  margin-bottom: 30px;
  transition: $transition;

  &:hover {
    box-shadow: $shadow-hover;
  }
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}
.info-item {
  display: flex;
  flex-direction: column;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  transition: $transition;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  }
}
.info-label {
  font-weight: 600;
  color: #555;
  margin-bottom: 8px;
  font-size: 15px;
}
.info-value {
  color: #333;
  font-size: 15px;
  line-height: 1.6;
}
.info-desc {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed #eee;
}
.info-desc h2 {
  margin: 0 0 15px;
  font-size: 18px;
  color: $primary-dark;
}
.info-desc p {
  margin: 0;
  font-size: 16px;
  color: #444;
  line-height: 1.8;
}

.gallery-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
  display: flex;
  align-items: center;

  &::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 20px;
    background-color: $primary;
    margin-right: 10px;
    border-radius: 2px;
  }
}
.gallery-scroll {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding: 15px 0;
  scrollbar-width: thin;
  scrollbar-color: $primary-light transparent;
  padding-bottom: 10px;

  &::-webkit-scrollbar {
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: $primary;
    border-radius: 3px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
}
.gallery-item {
  flex: 0 0 auto;
  width: 220px;
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f0f0;
  cursor: pointer;
  position: relative;
  transition: $transition;

  &:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: $transition;
  }

  &:hover img {
    transform: scale(1.1);
  }
}

.comments-section {
  width: 100%;
  max-width: 70rem;
  margin: 30px auto;
  padding: 25px 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: $shadow;
  font-family: 'Segoe UI', sans-serif;
  color: #333;
}

.comments-title {
  font-size: 22px;
  font-weight: 600;
  position: relative;
  margin-bottom: 25px;
  color: #333;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 60px;
    height: 3px;
    background: $primary;
    border-radius: 2px;
  }
}

.top-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 25px;
}
.btn-add-comment {
  font-size: 15px;
  padding: 10px 20px;
  background: $primary;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: $transition;
  display: flex;
  align-items: center;
  gap: 8px;

  &:hover {
    background: $primary-dark;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  }

  &:active {
    transform: translateY(0);
  }
}

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.comment-item {
  display: flex;
  gap: 15px;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: $transition;

  &:hover {
    background-color: #fafafa;
    padding-left: 10px;
  }

  &:last-child {
    border-bottom: none;
  }
}

.comment-avatar {
  flex-shrink: 0;

  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid $primary-light;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: $transition;

    &:hover {
      transform: scale(1.1) rotate(5deg);
      box-shadow: 0 3px 10px rgba(64, 158, 255, 0.2);
    }
  }
}

.comment-body {
  flex: 1;
}
.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.username {
  font-size: 16px;
  font-weight: 600;
  color: $primary-dark;
  transition: $transition;

  &:hover {
    color: $primary;
    text-decoration: underline;
  }
}
.comment-time {
  font-size: 13px;
  color: #999;
}

.comment-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 15px;
}
.comment-rating .star {
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg fill='%23e0e0e0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .587l3.668 7.568L24 9.423l-6 5.847L19.335 24 12 20.012 4.665 24 6 15.27 0 9.423l8.332-1.268z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.comment-rating .star.active {
  background: url("data:image/svg+xml,%3Csvg fill='%23f5a623' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .587l3.668 7.568L24 9.423l-6 5.847L19.335 24 12 20.012 4.665 24 6 15.27 0 9.423l8.332-1.268z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.rating-value {
  font-size: 15px;
  color: #f5a623;
  margin-left: 10px;
  font-weight: 500;
}

.comment-text {
  font-size: 16px;
  line-height: 1.6;
  color: #444;
  margin-bottom: 15px;
  padding: 10px 0;
}

.comment-media,
.reply-media {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}
.comment-media img,
.reply-media__img {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #eee;
  transition: $transition;

  &:hover {
    transform: scale(1.1) rotate(2deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.comment-actions {
  margin-bottom: 15px;
}
.btn-reply {
  background: transparent;
  border: none;
  color: $primary;
  font-size: 15px;
  cursor: pointer;
  transition: $transition;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 4px;

  &:hover {
    color: $primary-dark;
    background-color: $primary-light;
  }

  &:active {
    background-color: #d1eaff;
  }
}

.reply-list {
  list-style: none;
  padding: 0;
  margin: 15px 0 0 65px;
}
.reply-item {
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  transition: $transition;

  &:hover {
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
}
.reply-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ddd;
  transition: $transition;

  &:hover {
    transform: scale(1.1);
  }
}
.reply-content {
  flex: 1;
}
.reply-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.reply-text {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

::v-deep .el-dialog {
  border-radius: 12px;
  box-shadow: $shadow-hover;
  overflow: hidden;
}

::v-deep .el-dialog__header {
  background-color: $primary-light;
  padding: 18px 20px;

  .el-dialog__title {
    color: $primary-dark;
    font-size: 18px;
    font-weight: 600;
  }
}

::v-deep .el-form-item {
  margin-bottom: 20px;

  &:hover .el-form-item__label {
    color: $primary;
  }
}

::v-deep .el-rate {
  --el-rate-icon-size: 24px;
}

::v-deep .el-upload {
  --el-upload-picture-card-size: 100px;
}

::v-deep .el-button--primary {
  transition: $transition;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(64, 158, 255, 0.3);
  }

  &:active {
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .store-hero {
    flex-direction: column;
  }

  .hero-image {
    flex: none;
    width: 100%;
    height: 300px;
  }

  .hero-title {
    font-size: 24px;
    margin-top: 20px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .gallery-item {
    width: 150px;
    height: 100px;
  }

  .comment-item,
  .reply-item {
    flex-direction: column;
  }

  .reply-list {
    margin-left: 0;
  }

  .comment-avatar {
    align-self: flex-start;
  }
}
</style>